<template>
  <el-dialog title="查看情形" :visible.sync="showDialog" width="60%">
    <div class="list">
      <div class="item">
        <el-form label-width="150px">
          <el-form-item label="情形名称：" required>
            <div style="display: flex">
              <span>{{name}}</span>
            </div>
          </el-form-item>
          <div v-for="(x, xIndex) in options" :key="xIndex">
            <el-form-item :label="'选项'+(xIndex+1)+'：'" required>
              <div style="display: flex">
                <span style="white-space: nowrap;">{{x.situationItemName}}</span>
                <div class="dataBox">
                  <span style="margin-left:20px;">关联材料：</span>
                  <el-tag
                    style="margin-right:5px;"
                    v-for="(y, yIndex) in x.materialObjs"
                    :key="yIndex"
                  >{{y.materialName}}</el-tag>
                </div>
              </div>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="showDialog = false">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { addSituation } from '@/api/situation/index';
  export default {
    name: 'seeSituation',
    data() {
      return {
        showDialog:false,
        name:'',
        nowIndex:0,
        options:[
          {
            situationItemName:'',
            materialObjs: []
          }
        ]
      };
    },

    methods: {
      getDetails(opt){//获取详情
        this.name = opt.situationObjectName;
        this.options = opt.situationItems;
        this.situationObjectId = opt.situationObjectId;
      }
    },
    mounted() {}
  };
</script>

<style lang="scss" scoped>
.el-button{
  max-height: 40px;
}
.list {
  padding: 20px;
  background: rgba(90, 145, 184, 0.1);
  .item {
    padding: 10px 0;
  }
  .sonBox {
    margin-bottom: 5px;
    position: relative;
    .deleteSon {
      position: absolute;
      right: 5px;
      top: 5px;
      font-size: 20px;
      color: #d11f1f;
      cursor: pointer;
    }
  }
}
.dataBox {
  margin-left: 10px;
  a {
    color: #409eff;
    margin-right: 5px;
  }
}
</style>
